<template>
    <div v-if="configFail">配置错误</div>
    <div id="container" v-else>
        <div id="tip" :class="{ come: enlarge }">
            <template v-if="showResult">
                <div>{{ today }}</div>
                <div>做题总数：{{ total }}</div>
                <div>
                    做错数量：<span :class="{ red: wrongNum > 0 }">{{ wrongNum }}</span>
                </div>
                <div v-if="wrongNum > 0" class="red">
                    <template v-if="!isMobile"> &lt;&lt;&lt;&lt; </template>
                    做错题目
                </div>
            </template>
            <template v-else>
                <span>剩余时间：{{ spend }}秒</span>
            </template>
        </div>

        <div id="list" ref="list" :class="{ leave: enlarge }">
            <ol>
                <template v-if="showResult">
                    <li class="wrong-item" v-for="(item, idx) in wrongItems" v-bind:key="idx">
                        {{ item.content }}
                    </li>
                </template>
                <template v-else>
                    <li class="item" v-for="(item, idx) in items" v-bind:key="idx">
                        <el-form-item :label="labelTxt(item)">
                            <el-input v-model="items[idx][4]" @focus="changeScroll" />
                        </el-form-item>
                    </li>
                </template>
            </ol>
        </div>
    </div>
</template>


<script>
import tools from '../utils/tools.js'

// 算式数组
// 数字1    数字2   方法    正确结果    输入结果    结果是否正确

export default {
    data() {
        return {
            limitTime: 10,
            jiaRange: 10,
            jianRange: 10,
            chengRange: 9,

            selectType: 0, // 选择口算的方法数

            configFail: false,

            timer: null,
            items: [], //题目
            showResult: false,
            wrongItems: [], //错题
            total: 0, //结果

            spend: 0,

            isMobile: false,
            today: '',
            enlarge: false
        }
    },
    created() {
        this.limitTime = parseInt(this.$route.query.limit)
        this.jiaRange = parseInt(this.$route.query.plus_range)
        this.jianRange = parseInt(this.$route.query.sub_range)
        this.chengRange = parseInt(this.$route.query.multi_range)
        this.spend = this.limitTime

        if (this.jiaRange > 0) {
            this.selectType += 1
        }
        if (this.jianRange > 0) {
            this.selectType += 1
        }
        if (this.chengRange > 0) {
            this.selectType += 1
        }

        if (this.limitTime < 1 || this.selectType == 0) {
            this.configFail = true
        } else {
            this.initItems()
        }

        this.isMobile = tools.isMobile()
    },

    computed: {
        wrongNum() {
            return this.wrongItems.length
        }
    },

    methods: {
        submit() {
            if (this.spend > 0) {
                return
            }
            this.spend = '提交'
            this.showResult = true

            const submitItem = this.items.filter((t) => {
                return t[4].length > 0
            })
            this.total = submitItem.length
            for (let i = 0; i < this.total; i++) {
                let item = submitItem[i]
                // 数字1    数字2   方法    正确结果    输入结果    结果是否正确
                if (item[3] != parseInt(item[4])) {
                    //                    let content = item[0] + item[2] + item[1] + '=' + item[4]
                    let content = { content: item[0] + item[2] + item[1], result: item[3] }
                    if (i == this.total - 1) {
                        content = '最后一题：' + content + '   有可能还没输入完时间就到了'
                    }
                    this.wrongItems.push(content)
                }
            }
            this.today = tools.today()
            if (this.wrongItems.length < 1 && !this.isMobile) {
                this.enlarge = true
            } else {
                tools.saveHistory({ "time": this.today, "items": this.wrongItems })
            }
        },
        changeScroll(event) {
            if (this.timer == null) {
                // 首次点击输入框则开始计时
                const that = this

                this.timer = setInterval(function () {
                    that.spend -= 1
                }, 1000)

                setTimeout(function () {
                    that.submit()
                    clearInterval(that.timer)
                }, (this.limitTime + 1) * 1000)
            }
            const top = this.offsetTop(event.currentTarget)
            this.$refs.list.scrollTo(0, top - 130)
        },

        offsetTop(elements) {
            var top = elements.offsetTop
            var parent = elements.offsetParent
            while (parent != null) {
                top += parent.offsetTop
                parent = parent.offsetParent
            }
            return top
        },
        labelTxt(item) {
            return item[0] + ' ' + item[2] + ' ' + item[1] + ' = '
        },
        initItems() {
            let itemNum = this.limitTime * (4 - this.selectType)
            // 数字1    数字2   方法    正确结果    输入结果     结果是否正确

            for (let i = 0; i < itemNum; i++) {
                if (this.jiaRange > 0) {
                    let itemjia = []
                    itemjia[0] = tools.getRandom(this.jiaRange)
                    itemjia[1] = tools.getRandom(this.jiaRange - itemjia[0])
                    itemjia[2] = '+'
                    itemjia[3] = itemjia[0] + itemjia[1]
                    itemjia[4] = ''
                    itemjia[5] = false
                    this.items.push(itemjia)
                }
                if (this.jianRange > 0) {
                    let itemjia = []
                    itemjia[0] = tools.getRandom(this.jianRange)
                    itemjia[1] = tools.getRandom(itemjia[0])
                    itemjia[2] = '-'
                    itemjia[3] = itemjia[0] - itemjia[1]
                    itemjia[4] = ''
                    itemjia[5] = false
                    this.items.push(itemjia)
                }
                if (this.chengRange > 0) {
                    let itemcheng = []
                    itemcheng[0] = tools.getRandom(this.chengRange, 2)
                    itemcheng[1] = tools.getRandom(9, itemcheng[0])
                    itemcheng[2] = 'x'
                    itemcheng[3] = itemcheng[1] * itemcheng[0]
                    itemcheng[4] = ''
                    itemcheng[5] = false
                    this.items.push(itemcheng)
                }
            }
        }
    }
}
</script>

